
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Enterprise Cockpit</title>
		<link href="<%=path%>/js/bootstrap/css/bootstrap.css" rel="stylesheet">
		<script src="<%=path%>/js/jquery.1.7.2.js"></script>
		<script src="<%=path%>/js/jquery.pagination.js"></script>
		<script src="<%=path%>/js/handlebars-1.0.rc.1.min.js"></script>
		<style type="text/css">
			<style>
			table tr{
			    height:100px;
			    line-height:25px;
			}
			</style>
		<script id="some-template" type="text/x-handlebars-template">
	 <tr>
		<th style="background-color :white;">
			属性1
		</th>
		<th style="background-color :white;">
			属性2
		</th>
		<th style="background-color :white;">
			属性3
		</th>
	</tr>
    {{#each this}}
        <tr height="50px">
          <td>{{id}}</td>
          <td>{{loginName}}</td>
          <td>{{userName}}</td>
        </tr>
     {{/each}}
</script>
		<script type='text/javascript'>
		$(function(){
			var source   = $("#some-template").html();
			var template = Handlebars.compile(source);
			$('#pagination').pagination(100, {
				current_page : 0,
				items_per_page : 10,
				num_display_entries : 3,
				callback : function(page_id){
					$('#list-content').html('');
					$.get("listPersonJson.do",function(data,status,xhr){
						$('#list-content').html(template(data));
				      });
				},
				load_first_page : true,
				prev_text : '上一页',
				next_text : '下一页'
			});
		});

</script>
	<body>
		<div class="row-fluid">
			<div class="span4 offset4">
				<form class="form-inline">
					<input type="text" class="input-small" placeholder="Email">
					<input type="password" class="input-small" placeholder="Password">
					<label class="checkbox">
						<input type="checkbox">
						Remember me
					</label>
					<button type="submit" class="btn">
						Sign in
					</button>
				</form>

				<table class="table table-striped">
					<tbody id="list-content"></tbody>
					<tfoot>
						<tr>
							<td colspan="3">
								<div class="pagination" id="pagination"
									style="margin: 4px 0 0 0;text-align:right"></div>
							</td>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>

	</body>
</html>